<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="名称" v-model="params.name" style="width: 130px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.status" filterable placeholder="商户状态" style="width: 120px;" clearable>
        <el-option :value="10" label="启用"></el-option>
        <el-option :value="20" label="关闭"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getRoleList(1)">搜索</el-button>
      <el-button v-if="btnPower.StaffRoleAdd" class="filter-item" type="primary" icon="el-icon-plus" @click="getButton()">添加</el-button>
    </div>
    <el-table
      :data="rolesList"
      v-loading="listLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="description"
        label="备注"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80"
        :formatter="statusType"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modAt"
        label="修改时间"
        :formatter="timeFormat"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modAt"
        label="创建时间"
        width="160"
        :formatter="timeFormat"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button v-if="btnPower.StaffRoleRev" type="text" icon="el-icon-edit" class="el-link" size="small" @click="getButton(scope.row)">修改</el-button>
          <el-button v-if="btnPower.StaffRoleMenu" type="text" icon="el-icon-finished" class="el-link el-link--success" size="small" @click="getMenuButton(scope.row)">分配权限</el-button>
          <el-button v-if="btnPower.StaffRoleDel" type="text" icon="el-icon-delete" class="el-link el-link--danger" size="small" @click="getDelRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getRoleList" />
    <el-dialog
      :title="popupType==1?'添加用户':'修改用户'"
      :visible.sync="popup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status" filterable>
            <el-option label="启用" :value="10"></el-option>
            <el-option label="停用" :value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.description"
            maxlength="30"
            :autosize="{ minRows: 3, maxRows: 3}">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="abow_dialog"
      :title="'分配('+menuForm.name+')权限'"
      :visible.sync="menuPopup"
      destroy-on-close=true
      :close-on-click-modal=false
      :destroy-on-close=true
      width="420px"
      center>
      <el-tree
        :data="menuListAll"
        style="height: 50vh; overflow: hidden; overflow-y: scroll;"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="menuPopup = false">取 消</el-button>
        <el-button type="primary" @click="getMenuForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { roleList, addRevRest, delRole, authList, distAuth, addDistAuth } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'StaffRole',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading:true,
      popupType:1,// 1添加  2编辑
      popup:false,//弹窗隐藏状态
      rolesList:[],//角色列表
      total:0,//总条数
      params:{
        current: 1,
        size: 10,
        name:null,
        status:null,
      },//查询条件
      ruleForm:{
        name:null,
        status:10,
        description:null,
      },//表单内容
      rules:{
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
      },
      menuPopup:false,//菜单弹窗
      menuListAll:[],//所有菜单列表
      menuForm:{//角色信息表单
        roleId:null,
        name:null,
        authes:[],
      },
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id',
      },
    }
  },
  created() {
    this.getStart();
  },
  methods: {
    getStart(){//初始化
      this.getRoleList()
      this.getMenuListAll()
    },
    getRoleList(e){//获取用户列表
      if(e==1){ this.params.current=1}
      let _this=this
      let data=this.params
      this.listLoading=true
      roleList(data).then(d=>{
        _this.rolesList=d.data.records
        _this.total=d.data.total
      }).finally(d=>{
        _this.listLoading=false
      });
    },
    getButton(e){//点击添加编辑
      if (e) {//修改
        this.popupType=2
        this.ruleForm.id=e.id
        this.ruleForm.name=e.name
        this.ruleForm.status=e.status
        this.ruleForm.description=e.description
      }else{//添加
        this.popupType=1
        this.ruleForm.id=''
        this.ruleForm.name=null
        this.ruleForm.status=10
        this.ruleForm.description=null
      }
      this.popup=true
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if(valid) {
          _this.getForm()
        } else {
          return false;
        }
      });
    },
    getForm(){//提交表单
      let _this=this
      let data=_this.ruleForm
      let method = "POST"
      let alerts = "添加"
      if(this.popupType==2){
        method = "PUT"
        alerts = "修改"
      }
      addRevRest(data,method).then(d=>{
        _this.$message({
          type: 'success',
          message: alerts+'成功!'
        });
        _this.popup=false
        _this.getRoleList(1)
      });
    },
    getDelRole(e){
      let _this=this;
      this.$confirm('是否删除（'+e.name+'）角色','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let data={}
        data.id=e.id;
        delRole(data).then(d=>{
          _this.$message({
            type: 'success',
            message: '删除成功!'
          });
          _this.getRoleList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getMenuListAll(){
      let _this=this
      let data={}
      data.sysType=10
      authList(data).then(d=>{
        _this.menuListAll=d.data
      })
    },
    getMenuButton(e){//点击分配权限
      this.menuPopup=true
      this.menuForm.roleId=e.id
      this.menuForm.name=e.name
      let _this=this
      let data={}
      data.roleId=e.id
      distAuth(data).then(d=>{
        let authes=[]
        for (let i=0; i<d.data.length; i++){
          authes.push(d.data[i].authId);
        }
        _this.$refs.tree.setCheckedKeys(authes)
      })
    },
    getMenuForm(){//提交分配菜单权限表单
      let _this=this
      let authes=this.$refs.tree.getCheckedKeys()
      authes.push.apply(authes, this.$refs.tree.getHalfCheckedKeys())
      this.menuForm.authes=authes
      let data=this.menuForm
      addDistAuth(data).then(d=>{
        _this.$message({
          type: 'success',
          message: '添加成功!'
        });
        _this.menuPopup=false
      })
    },

    timeFormat(row, column, cellValue, index) {
      return this.common.getLocalTime(parseInt(cellValue) * 1000);
    },
    statusType(row, column, cellValue, index){//用户状态
      switch(Number(cellValue)){
        case 10:
          return "开启"
        case 20:
          return "关闭"
        default:
          return cellValue
      }
    },
  }
}
</script>

